---
title: Heading
description: A typography component for displaying page and section headings.
metaDescription: Heading typography component for React and Solid.js with semantic HTML heading levels. Create consistent, accessible page and section headings across your site.
category: typography
links:
  recipe: https://github.com/cschroeter/park-ui/blob/next/packages/preset/src/recipes/heading.ts
---

<ComponentExample name="basic" />

## Installation

<InstallationGuide />

## Usage

```tsx
import { Heading } from '@/components/ui'
```

```tsx
<Heading>I'm a heading</Heading>
```

## Examples

### Sizes

Use the `textStyle` prop to change the size of the heading.

<ComponentExample name="sizes" />

{/* ### Highlight

Compose the `Heading` component with the `Highlight` component to highlight text.

<ComponentExample name="highlight" /> */}

### As another element

Use the `as` prop to render the heading as another HTML element.

<ComponentExample name="as" />

### Weights

Use the `fontWeight` prop to change the weight of the heading component.

<ComponentExample name="weights" />

## Props

<PropsTable />
